<template>
  <ul v-for="(item, index) in data" style="margin-left:20px;">
    <li>
      <div class="node-content" :style="lineStyle">
        <svg-icon
          :icon="item.children ? 'expIcon' : 'none'"
          :class="expClass(item)"
          @click="expansion(item)"
        />
        <div class="node-label">
          <div
            class="node-text"
            @click="
              selectNode(item, $event);
              expansion(item);
            "
          >
            {{ item.label }}<n-el tag="span" style="margin-left:5px;color:var(--text-color-3)">[{{item.value}}]</n-el>
          </div>
        </div>
        <div class="node-bar">
          <n-button-group size="small" v-if="editId == '' || editId == null">
            <n-space size="large">
              <n-button text @click="edit(item, $event)">
                <template #icon
                  ><n-icon><svg-icon icon="edit"/></n-icon
                ></template>
              </n-button>
              <n-button text @click="add(item, $event)"
                ><template #icon
                  ><n-icon><svg-icon icon="add"/></n-icon></template
              ></n-button>
              <n-button text type="error" @click="del(item)"
                ><template #icon
                  ><n-icon><svg-icon icon="delete"/></n-icon></template
                ></n-button>
            </n-space>
          </n-button-group>
        </div>
      </div>
      <template v-if="item.children">
        <tree-node
          v-if="expNodes.indexOf(item.key) >= 0"
          :data="item.children"
          v-model:selected="current"
          @selectNode="selectNode"
        />
      </template>
    </li>
  </ul>
  <n-modal v-model:show="showEdit" class="node-edit" :style="{ top, left }" @update:show="(show)=>{show ? showEdit = show : editId=null}">
    <n-card
      :bordered="false"
      content-style="padding:5px;"
      header-style="padding:10px 20px;"
      footer-style="padding:0 10px 5px 0;"
    >
      <template #header><div style="font-size:16px;">编辑</div></template>
      <n-form :label-width="50" size="small" label-placement="left" :show-feedback="false">
        <n-space>
        <n-form-item path="id" label="ID">
          <n-input v-model:value="current.key" type="text"/>
        </n-form-item>
        <n-form-item path="label" label="标签">
          <n-input v-model:value="current.label" type="text"/>
        </n-form-item>
        <n-form-item path="value" label="值" style="margin-right:12px;">
          <n-input v-model:value="current.value" type="text"/>
        </n-form-item>
        </n-space>
      </n-form>
    </n-card>
  </n-modal>
</template>
<script>
import { ref, computed } from "vue";
import { uuid } from "vue-uuid";
import SvgIcon from "./SvgIcon.vue";
import {useOsTheme} from 'naive-ui'
export default {
  components: { SvgIcon },
  props: ["data", "selected"],
  setup(props, content) {
    //处理选中
    const current = ref({});
    const selectNode = (node, e) => {
      e.stopPropagation();
      current.value = node;
      content.emit("selectNode", current.value, e);
    };
    //处理样式
    const lineStyle = computed(()=>{
      if (useOsTheme().value == 'dark'){
        return '--hoverBackGroundColor:rgba(255,255,255,0.1)'
      } else {
        return '--hoverBackGroundColor:rgba(0,0,0,0.1)'
      }
    })
    //处理展开
    const expNodes = ref([]);
    const expClass = (item) => {
      if (typeof item!='undefined'){
        return "exp-icon-" + (expNodes.value.indexOf(item.key) >= 0).toString();
      }else{
        return "exp-icon-false"
      }
    };
    const expansion = (item, isExp) => {
      const i = expNodes.value.indexOf(item.key);
      if (i >= 0 && !isExp) {
        delete expNodes.value[i];
      } else if (item.hasOwnProperty("children")) {
        expNodes.value.push(item.key);
      }
    };
    //处理toolbar显示
    const editId = ref(null);
    //处理显示编辑框
    const showEdit = ref(false);
    const top = ref("0px");
    const left = ref("0px");
    const showModal = (e) => {
      const width = document.body.clientWidth
      const height = document.body.clientHeight
      let target = e.target
      if (e.target.localName=="use"){
        target= e.target.parentNode
      }
       const textNode =
         target.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.childNodes[1];
      //根据当前弹出modal的高度和宽度，自动判断位置，显示到节点的上面或左面
      if (textNode.getBoundingClientRect().top+190>height){
        top.value = textNode.getBoundingClientRect().top-170+"px"
      }else{
        top.value = textNode.getBoundingClientRect().top+20+"px"
      }
      if (textNode.getBoundingClientRect().left+240>width){
        left.value = textNode.getBoundingClientRect().left-240+"px"
      }else{
        left.value = textNode.getBoundingClientRect().left+"px"
      }
      console.log(height,width,top.value,left.value)
      showEdit.value = true;
    };
    //处理CURD操作
    const edit = (item, e) => {
      current.value = item
      showModal(e)
      editId.value = item.key;
    };
    const del = (item) => {
      const i = props.data.findIndex(row=>row==item)
      props.data.splice(i,1)
      editId.value = null;
    };
    const add = (item, e) => {
      const node = {
        key: uuid.v4(),
        label: "",
        value: "",
      };
      if (item.hasOwnProperty("children")) {
        item.children.push(node);
      } else {
        item.children = [node];
      }
      expansion(item, true);
      editId.value = node.key;
      current.value = node;
      showModal(e)
    };
    return {
      lineStyle,
      selectNode,
      expansion,
      expClass,
      expNodes,
      current,
      editId,
      edit,
      del,
      add,
      showEdit,
      top,
      left,
      useOsTheme
    };
  },
};
</script>

<style scoped>
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.node-content {
  display: flex;
  height: 24px;
}
.node-content:hover {
  background-color: var(--hoverBackGroundColor);
}
.node-label {
  width: 100%;
  height: 24px;
  display: flex;
  font-size: 14px;
}
.node-edit {
  width: 240px;
  position: absolute;
  padding: 0px;
  height:170px;
}
.node-edit span {
  margin: 0 10px;
}
.node-edit input {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  margin-left: 5px;
  border-radius: 3px;
}
.node-text {
  cursor: pointer;
  height: 24px;
  width: 100%;
}
.node-bar {
  width: 120px;
  flex: 0 0 120px;
  text-align: center;
}
.exp-icon-false {
  margin-right: 10px;
  cursor: pointer;
  height: 24px;
  justify-content: flex-start;
}
.exp-icon-true {
  margin-right: 10px;
  cursor: pointer;
  height: 24px;
  justify-content: flex-start;
  transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  /* Internet Explorer 9*/
  -moz-transform: rotate(90deg);
  /* Firefox */
  -webkit-transform: rotate(90deg);
  /* Safari 和 Chrome */
  -o-transform: rotate(90deg);
  /* Opera */
}
</style>
